<template>
    <div style="width: 500px;">
        <el-input
                prefix-icon="el-icon-search"
                placeholder="请输入部门名称进行搜索..."
                v-model="filterText">
        </el-input>

        <el-tree
                class="filter-tree"
                :data="deps"
                :props="defaultProps"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                ref="tree">
            <span class="custom-tree-node" style="display: flex; justify-content: space-between; width: 100%;" slot-scope="{ node, data }">
                <span>{{ data.name }}</span>
                <span>
                    <el-button
                            type="primary"
                            size="mini"
                            class="depBtn"
                            @click="() => showAddDepView(data)">
                        添加部门
                    </el-button>
                    <el-button
                            type="danger"
                            size="mini"
                            class="depBtn"
                            @click="() => deleteDep(data)">
                        删除部门
                    </el-button>
                </span>
            </span>
        </el-tree>
    </div>
</template>

<script>
    export default {
        name: "DepMana",
        data() {
            return{
                filterText: '',
                deps: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                }
            }
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        mounted() {
            this.initDeps();
        },
        methods: {
            showAddDepView(data) {
                console.info(data);
            },
            deleteDep(data) {

            },
            initDeps() {
                this.getRequest('/system/basic/department/').then(resp => {
                   if (resp){
                       this.deps = resp;
                   }
                });
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            }
        }
    }
</script>

<style>
    .depBtn{
        padding: 2px;
    }

</style>
